<template>
    <div class="container" :style="containerStyle">
        <div id="slide">
            <div class="item" v-for="(item, i) in imgsList" :key="i" :style="getItemStyle(i, item)">
                <!-- <div class="content">
                    <div class="name">LUNDEV</div>
                    <div class="des">Tinh ru anh di chay pho, chua kip chay pho thi anhchay mat tieu</div> <button>See
                        more</button>
                </div> -->
            </div>

        </div>
        <div class="buttons">
            <button id="prev" @click="prev">
                < </button>
                    <button id="next" @click="next"> > </button>
                    <button id="close" @click="close"> x </button>


        </div>
    </div>

</template>

<script setup>



import { ref, computed } from 'vue'
const props = defineProps({
    imgsList: {
        type: Array, default: [
            '/imgs/1.png',
            '/imgs/2.jpg',
            '/imgs/3.png',
            '/imgs/1.png',
            '/imgs/2.jpg',
            '/imgs/3.png',
        ]
    },
    width: { type: String, default: '' }, // 容器宽度
    height: { type: String, default: '' }, // 容器高度
    imgSize: { type: String, default: 'cover' }, // 图片显示方式，cover/contain
    itemTop: { type: String, default: '50%' }, // 小图（第3张及以后）垂直位置
    itemLeft: { type: String, default: '50' }, // 小图（第3张及以后）水平基准（数字，单位为%）
    itemOpacity: { type: String, default: '1' }, // 小图（第3张及以后）透明度
})
const imgsList = ref(props.imgsList)
function next() {
    const first = imgsList.value.shift()
    imgsList.value.push(first)
}
function prev() {
    const last = imgsList.value.pop()
    imgsList.value.unshift(last)
}
const emit = defineEmits(['close'])
function close() {
    emit('close')
}
const containerStyle = computed(() => {
    const style = {}
    style.height = props.height
    style.width = props.width
    return style
})

function getItemStyle(i, item) {
    var itemStyle = {
        backgroundImage: `url(${item})`,
        backgroundSize: `${props.imgSize}`,
    }
    // 前两张用 CSS 控制，不加内联定位
    if (i === 0 || i === 1) return itemStyle

    // 第3张及以后动态设置
    const top = props.itemTop; // 垂直位置
    const leftBase = props.itemLeft; // 水平基准（数字，单位为%）
    const offset = 220;  // 每张偏移
    let opacity =  props.itemOpacity

    if (i > 4) opacity = 0

    // 拼接 %
    itemStyle.left = `calc(${leftBase}% + ${(i - 2) * offset}px)`
    itemStyle.top = top
    itemStyle.opacity = opacity

    return itemStyle
}

</script>

<style scoped>
body {
    background-color: #eaeaea;
    overflow: hidden;
}

.container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    padding: 50px;
    background-color: #f5f5f5;
    box-shadow: 0 30px 50px #dbdbdb;
    border-radius: 20px;

}

#slide {
    width: max-content;
    margin-top: 50px;

}

.item {
    width: 200px;
    height: 300px;
    background-position: 50% 50%;
    display: inline-block;
    transition: 0.5s;
    background-size: contain;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translate(100%, -50%);
    border-radius: 20px;
    box-shadow: 0 30px 50px #505050;
}

.item:nth-child(1),
.item:nth-child(2) {
    left: 0;
    top: 0;
    transform: translate(0, 0);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    box-shadow: none;
}

.item:nth-child(3) {
    left: 50%;
}

.item:nth-child(4) {
    left: calc(50% + 220px);
}

.item:nth-child(5) {
    left: calc(50% + 440px);
}

.item:nth-child(n+6) {
    left: calc(50% + 660px);
    opacity: 0;
}

.item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    width: 300px;
    text-align: left;
    padding: 0;
    color: #eee;
    transform: translate(0, -50%);
    display: none;
    font-family: system-ui;
}

.item:nth-child(2) .content {
    display: block;
    z-index: 11111;
}

.item .name {
    font-size: 40px;
    font-weight: bold;
    opacity: 0;
    animation: showcontent 1s ease-in-out 1 forwards
}

.item .des {
    margin: 20px 0;
    opacity: 0;
    animation: showcontent 1s ease-in-out 0.3s 1 forwards
}

.item button {
    padding: 10px 20px;
    border: none;
    opacity: 0;
    animation: showcontent 1s ease-in-out 0.6s 1 forwards
}

@keyframes showcontent {
    from {
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }
}

.buttons {
    position: absolute;
    bottom: 30px;
    z-index: 222222;
    text-align: center;
    width: 100%;
}

.buttons button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #555;
    transition: 0.5s;
    margin: 0 10px;
}

.buttons button:hover {
    background-color: #bac383;
}
</style>